<template>
  <div class="page-detail">
    <base-breadcrumb>
      <a-card v-loading="loading">
        <a-form-model ref="ruleForm" :model="formData" :rules="rules">
          <template>
            <title-name title="大事记基本信息" />
            <a-row>
              <a-col span="8">
                <a-form-model-item label="单位">
                  <SelectCompanyAndProject v-model="formData.depId" disabled :auto-select="true"
                    @onSelectChange="formData.depId = $event.id; formData.depName = $event.name" />
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item label="主题" prop="theme">
                  <BaseInput v-model="formData.theme" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item label="活动日期" prop="activityDate">
                  <a-date-picker v-model="formData.activityDate" value-format="x" placeholder="请选择" />
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item label="地点" prop="address">
                  <BaseInput v-model="formData.address" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item label="记录人" prop="recorder">
                  <BaseInput v-model="formData.recorder" placeholder="请输入" />
                </a-form-model-item>
              </a-col>

              <a-col span="8">
                <a-form-model-item label="摄影人" prop="photographer">
                  <BaseInput v-model="formData.photographer" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
              <a-col span="24">
                <a-form-model-item label="主要参加人" prop="participants">
                  <BaseInput v-model="formData.participants" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
              <a-col span="24">
                <a-form-model-item label="概要" prop="outline">
                  <BaseTextarea v-model="formData.outline" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </template>

          <template>
            <title-name title="重要领导照片" />
            <a-button class="mb20" type="primary" @click="modal.visible = true">
              上传
            </a-button>
            <a-table bordered :columns="columns" :data-source="formData.importantPhotoVos">
              <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
              <template slot="fileInfoVO" slot-scope="text, record">
                <img style="max-width: 100px;" :src="$fileUrl(record.fileInfoVO[0])" alt=""
                  @click="preview(record.fileInfoVO[0])">
              </template>
              <template slot="operation" slot-scope="text, record, index">
                <div class="pub-table-list-action">
                  <span><a :href="$fileUrl(record.fileInfoVO[0])">导出</a></span>
                  <span @click="$filePreview(record.fileInfoVO[0])">查看</span>
                  <span @click="editImportantPhoto(index)">编辑</span>
                  <span @click="delImportantPhoto(index)">删除</span>
                </div>
              </template>
            </a-table>
          </template>

          <template>
            <title-name class="mt20" title="其他附件" />
            <a-col span="24">
              <a-form-model-item label="其他照片">
                <b-upload business-code="TM04" upload-type="image-list" :file-list.sync="formData.attachmentVos1" />
              </a-form-model-item>
            </a-col>
            <a-col span="24">
              <a-form-model-item label="其他附件">
                <b-upload business-code="TM04" upload-type="single" :file-list.sync="formData.attachmentVos2" />
              </a-form-model-item>
            </a-col>
          </template>
        </a-form-model>
      </a-card>

      <div class="pub-header-btn page-btn-right-top">
        <a-button type="primary" @click="save()">
          提交
        </a-button>
        <a-button v-checkVisibleInDetail @click="$close()">
          关闭
        </a-button>
      </div>
    </base-breadcrumb>

    <!-- 图片预览 -->
    <pre-view :preview-image="previewImage" :visible.sync="previewVisible" />

    <a-modal class="normal-modal" title="重要领导照片" :visible="modal.visible" @cancel="cancel" @ok="addMajorPhoto">
      <div class="page-detail">
        <a-form-model ref="modalRuleForm" :model="modal.form" :rules="rules">
          <a-form-model-item label="重要领导照片" prop="fileInfoVO">
            <b-upload business-code="TM04" upload-type="image-single" :file-list.sync="modal.form.fileInfoVO" />
          </a-form-model-item>
          <a-form-model-item label="照片描述" prop="description">
            <div>
              <BaseTextarea v-model="modal.form.description" placeholder="请输入" />
              请从左至右依次标注人物姓名，例：职务-姓名（左一）
            </div>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>

import memorabilia from '@/api/office/memorabilia'
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject.vue'
import PreView from '@/components/PreView'

export default {
  components: {
    SelectCompanyAndProject, PreView
  },
  data() {
    let validatePass = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error('请上传重要领导照片'))
      } else {
        callback()
      }
    }
    return {
      previewImage: '',
      previewVisible: false,
      modal: {
        visible: false,
        form: {
          fileInfoVO: []
        }
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          scopedSlots: { customRender: 'index' },
          width: 70
        },
        {
          title: '照片',
          dataIndex: 'fileInfoVO',
          scopedSlots: { customRender: 'fileInfoVO' },
          width: 200
        },
        {
          title: '重要领导照片描述',
          dataIndex: 'description'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          width: 200
        }
      ],
      loading: false,
      formData: {
        depId: '',
        importantPhotoVos: [],
        attachmentVos: [],
        attachmentVos1: [],
        attachmentVos2: []
      },
      rules: {
        theme: { required: true, message: '请输入主题', trigger: 'blur' },
        address: { required: true, message: '请输入地点', trigger: 'blur' },
        recorder: { required: true, message: '请输入记录人', trigger: 'blur' },
        photographer: { required: true, message: '请输入摄影人', trigger: 'blur' },
        participants: { required: true, message: '请输入主要参加人', trigger: 'blur' },
        outline: { required: true, message: '请输入概要', trigger: 'blur' },
        description: { required: true, message: '请输入照片描述', trigger: 'blur' },
        activityDate: { required: true, message: '请选择活动日期', trigger: 'change' },
        fileInfoVO: { required: true, validator: validatePass, trigger: 'change' }
      }
    }
  },
  mounted: async function () {
    if (this.$route.query.id) {
      this.formData.id = this.$route.query.id
      await this.getDetails()
    }
  },
  methods: {
    cancel() {
      this.$refs.modalRuleForm.resetFields()
      this.modal.form = { fileInfoVO: [], description: '' }
      this.modal.visible = false
    },
    editImportantPhoto(index) {
      this.modal.visible = true
      this.modal.form = this.$clone(this.formData.importantPhotoVos[index])
    },
    preview(file) {
      this.previewImage = file.url || this.$fileUrl(file)
      this.previewVisible = true
    },
    delImportantPhoto(index) {
      this.$confirm({
        title: '确定删除？',
        onOk: async () => {
          this.formData.importantPhotoVos.splice(index, 1)
          this.$noticeSuccess('删除成功！')
        }
      })
    },
    addMajorPhoto() {
      this.$refs.modalRuleForm.validate(async valid => {
        if (valid) {
          if (this.modal.form.id) {
            let resIndex = this.formData.importantPhotoVos.findIndex(v => v.id === this.modal.form.id)
            if (resIndex !== -1) {
              this.$set(this.formData.importantPhotoVos, resIndex, this.modal.form)
            }
          } else {
            this.formData.importantPhotoVos.push({ id: Date.now(), ...this.modal.form })
          }
          this.modal.visible = false
          this.modal.form = { fileInfoVO: [] }
        } else {
          this.$noticeWarning('请填写完整')
        }
      })
    },
    // 获取编辑回显数据
    async getDetails() {
      this.loading = true
      let res = await memorabilia.findDetailById({}, { id: this.formData.id })
      this.loading = false
      if (res.code === 200) {
        if (res.data.importantPhotoVos.length) {
          res.data.importantPhotoVos.forEach((item, index) => {
            res.data.importantPhotoVos[index].fileInfoVO = [item.fileInfoVO]
          })
        }
        this.formData = this.$assign(this.formData, res.data)
        this.formData.attachmentVos1 = []
        this.formData.attachmentVos2 = []
        res.data.attachmentVos.map(v => {
          if (v.type === 1) {
            this.formData.attachmentVos1.push(v.fileInfoVO)
          } else {
            this.formData.attachmentVos2 = [v.fileInfoVO]
          }
        })
        this.$console(this.formData)
      }
    },
    async save() {
      new Promise(resolve => {
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            let temp = this.$clone(this.formData)
            temp.attachmentVos = temp.attachmentVos1.map(v => {
              return { fileInfoVO: v, type: 1 }
            })
            if (temp.attachmentVos2.length && temp.attachmentVos2[0].id) {
              temp.attachmentVos.push({ fileInfoVO: temp.attachmentVos2[0], type: 0 })
            }
            if (temp.importantPhotoVos.length) {
              temp.importantPhotoVos.forEach((item,index) => {
                temp.importantPhotoVos[index].fileInfoVO = item.fileInfoVO[0]
              })
            }
            this.loading = true
            let res
            if (temp.id) {
              res = await memorabilia.editByMain(temp)
            } else {
              res = await memorabilia.createByMain(temp)
            }
            if (res.code === 200) {
              resolve(true)
              this.$noticeSuccess('保存成功')
              this.formData.id = res.data.id
              await this.getDetails()
              this.$close()
            }
            this.loading = false
          } else {
            this.$noticeWarning('请填写完整')
          }
        })
      })

    }
  }
}
</script>
<style scoped>
.tender-container .ant-radio-group {
  float: right;
}
</style>
